<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue程序</title>
    <!--安装 vue.js-->
    <script src="js/vue.js"></script>
</head>
<body>
<!--指定Vue实例的挂载的位置-->
<div id="app"></div>

<script>
    /*
    *
    * 第一步:创建Vue实例
    * 1.为什么要new Vue(),直接调用Vue()函数不行吗?
    *   答:不行,因为直接调用Vue()函数，不创建实例的话,会出现以下的错误
    *   Vue is a constructor and should be called with the `new` keyword
    * 2.关于Vue构造函数的参数：options?
    *   option翻译为选项
    *   options翻译为多个选项
    *   Vue框架要求这个options参数必须是一个纯粹的JS对象:{}
    *   在{}对象中可以编写大量的key:value键值对
    *   一个key:value就是一个配置项
    *   主要是通过options这个参数来给Vue实例指定多个配置项
    * 3.关于template配置项
    *   template翻译为:模版
    *   template配置项是用来指定什么?用来指定模版语句,模版语句是一个字符串形式的
    *   什么是模版语句?
    *       Vue框架自己制定了一些具有特殊含义的特殊符号
    *       Vue的模版语句是Vue框架自己搞的一套语法规则
    *       我们在写Vue模版语句的时候,不能乱写,要遵守Vue框架的模版语法规则
    *       因为你既然使用人家的框架,就要遵守人家的规则
    *   模版语句可以是纯粹的HTML代码,也可以是Vue中的特殊规则，也可以是HTML代码+Vue特殊规则
    *   template后面的模版语句会被Vue框架的编辑器进行编译,转换成浏览器能够识别的HTML代码
    * */
    const vm = new Vue({
        template : '<h1>Hello Vue1111!111212</h1>'
    })

    /**
     * 第二步：将Vue实例挂载到 id='app'的元素位置
     * 1.Vue实例都有一个$mount()方法,这个方法的作用是什么?
     *  将Vue实例挂载到指定的位置：注意，指定位置的元素被替换
     * 2。 #app显然是ID选择器,这个语法借鉴了CSS
     *      也可以是其他的选择器,比如类选择器:'.app',类选择器可以匹配多个元素(位置),
     *      这个时候Vue只会选择第一个位置进行挂载(从上到下第一个)
     */
    vm.$mount('#app')
    //myVue.$mount(document.getElementId('app'))
</script>
</body>
</html>